<script setup>
import { computed, onMounted, ref } from 'vue';
import {onLoad} from '@dcloudio/uni-app'
import {ApiSetupScore,ApiDetailWall} from '@/api/perview.js'
import {getArrow} from '@/utils/system.js'

const goback=()=>{
  uni.navigateBack()
}

// 信息
const popup=ref(null)
const open=()=>{
  popup.value.open('bottom')
}

// 关闭信息popup
const close = ()=>{
   popup.value.close()
}

// 评分
const userpopup=ref(null)
const openScorePopur=()=>{
  userpopup.value.open()
}
const closeScorePopur=()=>{
  userpopup.value.close()
}
// 确认评分
const surerate= async(score)=>{
  const res =await ApiSetupScore({
    userScore	:score,
    classid:infoBanner.value.classid,
    wallId:infoBanner.value._id
  })
   getInfoBanner()
   userpopup.value.close()
}

// 接受索引参数
const index =ref()
onLoad((option)=>{
  index.value=parseInt(option.index)+1
  lazyImg()
})

// 读取浏览器壁纸缓存
const storgClassList= uni.getStorageSync('storgClassList')
const newStorgClassList= storgClassList.map(item=>{
  return {
    ...item,
    picurl:item.smallPicurl.replace('_small.webp','.jpg')
  }
})
// 监听轮播图滑动事件
const changeIndicatorDots=(e)=>{
  index.value=e.detail.current+1
  getInfoBanner()
  lazyImg()
}
// 切换轮播图后对应的壁纸信息
const infoBanner=ref({})
const getInfoBanner=async()=>{
  const res = await ApiDetailWall(newStorgClassList[index.value-1]._id)
  console.log(res);
  infoBanner.value=res.data[0]
  infoBanner.value.score= infoBanner.value.userScore || infoBanner.value.score
}
onMounted(()=>{
  getInfoBanner() 
}) 
  


// 点击切换定位盒子的显示或隐藏
const show=ref(true)
const isShow=()=>{
  show.value=!show.value
}
// 下载图片
const  downLoad=()=>{
  // #ifdef H5
    uni.showModal({
      content:"请长按保存壁纸",
      showCancel:false
    })
  // #endif
  
  // #ifndef H5
  
  	// uni.getImageInfo({
  	// 		src:infoBanner.value.picurl ,
  	// 		success: (res)=> {
  	// 		console.log(res);
  	// 		}
  	// 	})
  uni.saveImageToPhotosAlbum({
    filePath:infoBanner.value.picurl,
    success:(res)=>{
      console.log(res);
    }
  })
  // #endif
}

// 对图片进行懒加载
const lazyImgList=ref([])
const lazyImg=()=>{
  lazyImgList.value.push(
  index.value-2<0?newStorgClassList.length-1:index.value-2,
  index.value-1,
  index.value>newStorgClassList.length-1?0: index.value
  )
  console.log(lazyImgList.value);
}

</script>

<template>
  <view class="preview-container">
    <view class="preview" @click="isShow">
      <swiper circular="true" @change="changeIndicatorDots" :current="index-1">
        <swiper-item v-for=" (item,index) in newStorgClassList" :key="item._id" >
         <image :src="item.picurl" mode="aspectFill" v-if="lazyImgList.includes(index)"></image>
        </swiper-item>
      </swiper>
    </view>
    <!-- 定位盒子 -->
    <!-- 返回箭头 -->
  <view class="psa-box" :style="{top:getArrow()+'px'}" pointer-events="none" v-if="show">
     <view class="arrow"  @click="goback"><uni-icons type="left" color="#fff3f8" size="20"></uni-icons></view>
     <view class="page"><text>{{index}}/{{newStorgClassList.length}}</text></view>
      <view class="time"><uni-dateformat :date="Date.now()" format="hh:mm"></uni-dateformat></view>
      <view class="date"><uni-dateformat :date="Date.now()" format="MM月dd日"></uni-dateformat></view>
     </view>
    <view class="box" v-if="show">
        <view class="message" @click="open" >
          <uni-icons type="info" size="26"></uni-icons>
          <text>信息</text>
        </view>
        
        <view class="message" @click="openScorePopur">
          <uni-icons type="star" size="26"></uni-icons>
          <text>{{infoBanner.score}}分</text>
        </view>
        <view class="message" @click="downLoad">
          <uni-icons type="download" size="26"></uni-icons>
          <text>下载</text>
        </view>
      </view>
      <!-- 信息 -->
      <view class="message-popup">
        <uni-popup  ref="popup" type="bottom" background-color="#fff">
          <view class="pop-header">
                    <view></view>
                    <view class="title">壁纸信息</view>
                    <view class="close" @click="close"><uni-icons  color="rgba(157, 157, 157)" type="closeempty" size="16"></uni-icons>
          </view>
                  </view>
         <view class="pd">
           
                    <view class="ID">壁纸ID:<text>{{infoBanner.classid}}</text></view>
                    <view class="author">发布者:<text>{{infoBanner.nickname}}</text></view>
                    <view class="rete">评分:<uni-rate disabledColor="#ffca3e" allowHalf disabled v-model="infoBanner.score"/>{{infoBanner.score}}</view>
                    <view class="decs">摘要:<text>{{infoBanner.description}}</text></view>
                    <view class="bq">标签:<uni-tag v-for="item in infoBanner.tabs" :key="item" size="small" :text="item" inverted type="success" :circle="true"></uni-tag></view>
         </view>
          <view class="shengming">
            声明:发撒对方水电费水电费手打个电饭锅电饭锅电饭锅代发,发撒对方水电费水电费手打个电饭锅电饭锅电饭锅代发，发撒对方水电费水电费手打个电饭锅电饭锅电饭锅代发，发撒对方水电费水电费手打个电饭锅电饭锅电饭锅代发
          </view>
        </uni-popup>
      </view>
      
      <!-- 评分 -->
      <view class="userrete">
         <uni-popup  ref="userpopup" type="center" background-color="#fff" :is-mask-click=false>
           <view class="pop-header">
                     <view></view>
                     <view class="title">壁纸评分</view>
                     <view class="close" @click="closeScorePopur"><uni-icons  color="rgba(157, 157, 157)" type="closeempty" size="16"></uni-icons>
           </view>
                   </view>
                   <view class="content">
                    <uni-rate v-model="infoBanner.score" allow-half /><text>{{infoBanner.score}}</text>
                   </view>
                   <view class="footer">
                    <button @click="surerate(infoBanner.score)" :disabled="!infoBanner.score" type="primary" size="mini" plain>确认评分</button>
                   </view>
           </uni-popup>
      </view>
  </view>

</template>

<style lang="scss" scoped>
  .preview-container{
     width: 100%;
     height: 100vh;
     position: relative;
    .preview{
      position: absolute;
      width: 100%;
      height: 100vh;
      swiper{
        width: 100%;
        height: 100%;
          image{
            width: 100%;
            height: 100%;
        }
      }
      
    }
    .psa-box{
      position: absolute;
      top: 0;
      left: 0;
      color: #fff;
     // height: 100vh;
     width: 100%;
     box-sizing: border-box;
      .arrow{
        width: 70rpx;
        height: 70rpx;
        margin-left: 30rpx;
        // margin-top: 50rpx;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.2);
        text-align: center;
        line-height: 70rpx;
      }
      .page{
      // width: 100%;
      margin: 2vh auto;
      text-align: center;
      text{
        font-size: 24rpx;
        padding: 0 20rpx;
        height: 40rpx;
        background-color: rgba(151, 109, 84, 0.5);
        border-radius: 20rpx;
        letter-spacing: 4rpx;
      }
      }
      .time{
        font-size: 114rpx;
        text-align: center;
      }
      .date{
        font-size: 28rpx;
        text-align: center;
        color: rgba(243, 239, 231);
      }
      
    }
    .box{
      position: absolute;
      left:50% ;
      bottom: 10vh;
      transform: translate(-50%,0);
      width: 490rpx;
      height: 120rpx;
      background-color: rgba(255, 255, 255,0.8);
      border-radius: 100rpx;
      padding: 10rpx 40rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .message{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
        color: rgba(0, 0, 0 ,0.8)
      }
      
    }
    .pop-header{
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
      align-items: center;
      font-size: 28rpx;
      font-weight: 500;
    }
    .message-popup{
        color: rgba(157, 157, 157);
      
      .pd{
        width: 90%;
        margin: 0 auto;
        font-size: 32rpx;
        view{
          padding: 20rpx 0;
          text{
            color: #000;
            
          }
        }
        .rete{
          display: flex;
          align-items: center;
        }
          .bq{
            display: flex;
            align-items: center;
            justify-content: flex-start;
           :deep(){
             .uni-tag{
               color: rgba(128, 119, 187);
               margin-left: 20rpx;
             }
           }
          }
        
      }
      .shengming{
        width: 94%;
        margin: 0 auto;
        background-color: rgba(246, 246, 246);
        // white-space: normal;
        padding: 20rpx;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
      }
      
    }
    .userrete{
     :deep(){
       .uni-popup__wrapper{
         width: 70vw;
         border-radius: 30rpx;
       }
     }
     .content{
       padding: 30rpx 0;
       display: flex;
       justify-content: center;
       align-items: center;
       text{
         margin-left: 10rpx;
         color: #FFCA3E;
         width: 80rpx;
         line-height: 1em;
         text-align: right;
       }
     }
      .footer{
        padding: 10rpx;
        text-align: center;
        button{
          
        }
      }
    }
  }
</style>
